<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全屏展示</title>
</head>
<link href="<%=path %>/hplus/css/bootstrap.min.css" rel="stylesheet">
<link href="<%=path %>/hplus/css/animate.min.css" rel="stylesheet">
<link href="<%=path %>/hplus/css/style.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/style.min.css"/>
<style>
  .col-sm-1{
        padding-right: 0;
    }
  body{
		font-size:12px;
		font-family:"宋体";
	}
  .label1{
  		font-size:15px;
  		margin-left:10px;
  		margin-top:15px;
  }
  .label2{
  		font-size:12px;
  		margin:10px;
  		margin-top:5px;
  }
  .row{
  		background-color:#fff;
  		margin:10px;  		
  }
  .click-count{
  		font-size:16px;
  		color:#1ab394;
  }
  .point{
  		width:100%;
  		height:100%;
  		margin-top:-20px;
  }
  </style>
<body class="gray-bg">
	<div class="from-group">
		<div class="row">
				<label class="col-sm-11" style="margin-top:20px">当前展示节点数：<span class="show-point">500</span></label>
		     	<div class="point"></div>
		</div>
	</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.6.1/echarts.min.js"></script>
<script type="text/javascript" src="<%=path%>/js/marketing/public.js"></script>
<script type="text/javascript">
var path = "<%=path%>";
var aemId = getQueryString("aemId");
var exportType = getQueryString("exportType");
$(function(){
	initPoint();
})
function initPoint(){
	//获取节点的统计数据
	var initPointUrl =path+"/dissemination/findPointChart";
	var pointList = null;
	//节点
	var nodesData = new Array();
	//节点之间连线
	var linksData = new Array();
	$.ajax({
		type:"post",
		url:initPointUrl,
		async: false,
		data:{
			"aemId":aemId,
			"exportType":exportType
		},
	    success:function(data){
	    	pointList=data.data;
	    }
	});
	//处理
	if(pointList!=null){
		nodesData = new Array();
		var names = new Array();
		for(var i=0;i<pointList.length;i++){
			var nodes = new Object();
			var links = new Object();
			var point = pointList[i];
			var openId = point.openId+"";
			if(i==0){
				nodes.category=point.userIdentity;
				nodes.value=point;
				nodes.name=openId;
				nodesData.push(nodes);
				names.push(openId);	
			}else if(names.indexOf(openId)<0){			
				nodes.category=point.userIdentity;
				nodes.value=point;
				nodes.name=openId;
				nodesData.push(nodes);
				names.push(openId);	
			}
			links.source=pointList[i].openId;
			links.target=pointList[i].parentOpenId;			
			linksData[i]=links;
		}
	} 
	$(".show-point").html(nodesData.length);
	var webkitDep = {  
		    "type": "force",  
		    "categories": [//关系网类别，可以写多组  
	                   {  
			               "name": "非关注粉丝",//关系网名称  
			               "keyword": {},
			               "itemStyle": {
			                   "normal": {
			                        "color": "#1D84C6",
			                   }
			               }
			           },
			           {  
			               "name": "粉丝",//关系网名称  
			               "keyword": {},
			               "itemStyle": {
			                   "normal": {
			                        "color": "#F8AC59",
			                   }
			               }
			           },
			           {  
			               "name": "会员",//关系网名称  
			               "keyword": {},  
			               "itemStyle": {
			                   "normal": {
			                        "color": " #ED5565",
			                   }
			               }
			           },
			           {  
		               "name": "员工",//关系网名称  
		               "keyword": {},
		               "itemStyle": {
		                   "normal": {
		                        "color": "#1BB495",
		                   }
		               }
		           }
		    ],  
		    "nodes": nodesData ,  
		    "links":   linksData
			};
	initChart(webkitDep);
}
//初始化统计图
function initChart(webkitDep){
	var allChart = echarts.init($(".point")[0]);
	allChart.showLoading();  
	allChart.hideLoading();   
    allOption = {  
        legend: {  
            left:'20',
            top:'20',
            orient:'vertical',
            data: [{name:'非关注粉丝',icon:'circle'},,{name:'粉丝',icon:'circle'},{name:'会员',icon:'circle'},{name:'员工',icon:'circle'}]//此处的数据必须和关系网类别中name相对应  
        },  
        tooltip: {
            trigger: 'item',
            backgroundColor:"#fff",            //标题背景色
            borderColor:"#000", 
            borderWidth:1,                              //边框线宽
            padding:5,                                  //图例内边距，单位px  5  [5, 10]  [5,10,5,10]
            textStyle:"color:#000",
            formatter: function (params, ticket, callback) {
              var htmlStr = '<div style="margin:10px;">';
              var param =params.value;
              var userName="游客";
              var order= "暂无";
              var time="暂无";
              var top="暂无";
              var count="0";
              if(StringEmpty(param)){
	              if(StringEmpty(param.nickName)&&param.nickName!="null"){
	            	  userName = param.nickName;
	              }
	              if(StringEmpty(param.participateOrder)){
	            	  order = param.participateOrder;
	              }
	              if(StringEmpty(param.createTime)){
	      			var date = new Date(param.createTime);
	      	      	var y = date.getFullYear();    
	      			var mon = date.getMonth()+1;//获取当前月份的日期   
	      			var d = date.getDate(); 	
	      			var h=date.getHours();//小时 
	      	        var m=date.getMinutes(); //分 
	      	        var s=date.getSeconds(); //秒 
	      	        time = y+"-"+mon+"-"+d+" "+h+":"+m+":"+s;
	      	      }
	              if(StringEmpty(param.spreadRanking)){
	            	  top = param.spreadRanking;
	              }
	              if(StringEmpty(param.propagationNumber)){
	            	  count = param.propagationNumber;
	              }
	          }
              htmlStr +='用户昵称：' +userName+'</br>';
              htmlStr +='参与顺序：' +order+'</br>';
              htmlStr +='参与时间：' +time+'</br>';
              htmlStr +='传播排名：' +top+'</br>';
              htmlStr +='传播人数：' +count+'</br>';
              htmlStr +='</div>';
              return htmlStr;
             }               
            },
        series: [{  
            type: 'graph',  
            layout: 'force',  
            animation: false,  
            label: {  
                normal: {  
                    show:false,  
                    position: 'right'  
                }  
            },  
            hoverAnimation:true,
            focusNodeAdjacency:true,
            draggable: true,  
            data: webkitDep.nodes,  
            roam : true,
            categories: webkitDep.categories,  
            force: {
                // initLayout: 'circular'
                // repulsion: 20,
                edgeLength: 50,
                repulsion: 20,
                gravity: 0.2
            },
            edges: webkitDep.links  
        }]
    };  
    allChart.setOption(allOption); 
}
</script>
</html>